import {Image, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View, Dimensions} from "react-native";
import {Text} from "react-native-paper";
import {useEffect} from "react";
import {useNavigation} from "@react-navigation/native";
import {Product} from "../../types/Product";

interface props {
    filtered: Product[]
}

export const FilteredCardList = ({filtered}: props) => {
    const navigation = useNavigation();
    const cardWidth = Dimensions.get(`screen`).width * 0.44;

    const toAbout = (item: Product) => {
        // @ts-ignore
        navigation.navigate(`AboutScreen`, item);
    }

    useEffect(() => {
        console.log(cardWidth.toFixed());
    }, [filtered]);

    return (
        <View style={{flex: 1, flexDirection: "row", flexWrap: "wrap"}}>
            {filtered.map((item: Product) =>
                <TouchableWithoutFeedback key={item.id} onPress={() => toAbout(item)}>
                    <View style={{...style.card, width: Number(cardWidth.toFixed())}}>
                        <TouchableOpacity children={<Image source={item.url}
                                                           style={{maxWidth: `99%`}}/>}
                                          style={{
                                              height: 120,
                                              justifyContent: "center",
                                              alignItems: "center"
                                          }}/>

                        <Text children={`${item.title.slice(0, 21)}...`}
                              style={style.cardTitle}/>
                        <Text children={`${item.description.slice(0, 30)}...`}
                              style={style.cardDescr}/>
                        <Text children={item.price}
                              style={style.cardPrice}/>
                    </View>
                </TouchableWithoutFeedback>)}
        </View>
    );
};

const style = StyleSheet.create({
    card: {
        width: `44%`,
        height: 180,
        marginHorizontal: 11,
        padding: 5,
        marginVertical: 10,
        flexDirection: "column",
        borderRadius: 15,
        borderStyle: "solid",
        backgroundColor: "#FFF",
        shadowOffset: {width: -2, height: 4},
        shadowColor: '#171717',
        shadowOpacity: 0.2,
        shadowRadius: 3,
        elevation: 7,
    },
    cardTitle: {
        fontSize: 12,
        fontWeight: "700"
    },
    cardDescr: {
        fontSize: 9,
        fontWeight: "500"
    },
    cardPrice: {
        color: "#EE7100",
        fontSize: 13,
        fontWeight: "700"
    }
})